<template>
  <div class="bank-page">
    <div class="bank-form">
      <div class="form-group">
        <div class="form-label">{{ t("userbank_name") }}</div>
        <div class="input-wrapper">
          <input
            type="text"
            v-model="bankForm.userName"
            :placeholder="t('userbank_namePlaceholder')"
            class="form-input"
          />
        </div>
      </div>

      <div class="form-group">
        <div class="form-label">{{ t("userbank_bankName") }}</div>
        <div class="input-wrapper">
          <input
            type="text"
            v-model="bankForm.khyh"
            :placeholder="t('userbank_bankNamePlaceholder')"
            class="form-input"
            readonly
            @click="showBankSheet = true"
          />
        </div>
      </div>

      <div class="form-group">
        <div class="form-label">{{ t("userbank_account") }}</div>
        <div class="input-wrapper">
          <input
            type="text"
            v-model="bankForm.bankCard"
            :placeholder="t('userbank_accountPlaceholder')"
            class="form-input"
          />
        </div>
      </div>

      <div class="form-group">
        <div class="form-label">{{ t("sfz") }}</div>
        <div class="input-wrapper">
          <input
            type="text"
            v-model="bankForm.idCard"
            :placeholder="t('qsrsfz')"
            class="form-input"
          />
        </div>
      </div>

      <div class="form-button">
        <button
          @click="saveBankCard"
          :disabled="isSubmitting"
          class="submit-button"
        >
          {{ isSubmitting ? t("userbank_saving") : t("userbank_save") }}
        </button>
      </div>
    </div>

    <!-- <div class="bank-list" v-if="bankInfo.bankCard">
      <div class="bank-item">
        <div class="bank-info">
          <div class="bank-name">{{ bankInfo.khyh }}</div>
          <div class="account-number">{{ bankInfo.bankCard }}</div>
          <div class="holder-name">{{ bankInfo.userName }}</div>
        </div>
      </div>
    </div> 
    
    <div v-else class="no-data-wrapper">
      <div class="no-data-text">Belum ada informasi bank</div>
    </div>-->
    <van-action-sheet
      v-model:show="showBankSheet"
      :actions="bankOptions.map((item) => ({ name: item.bankname }))"
      @select="onSelectBank"
    />
  </div>
</template>

<script setup lang="ts">
// 导入所需的依赖
import { editUserBankCard, getUserBankInfo, bankList } from "@/api/user";
import { closeToast, showToast } from "vant";
import { onMounted, reactive, ref } from "vue";
import { useRouter } from "vue-router";

// 定义API响应类型接口
interface ApiResponse {
  msg: string;
  code: number;
  data: any;
}

const { t } = useI18n();
// 初始化数据
const router = useRouter();
const isSubmitting = ref(false);

// 表单数据
const bankForm = reactive({
  userName: "",
  khyh: "",
  bankCard: "",
  idCard: "",
});

// 银行卡信息
const bankInfo = reactive({
  userName: "",
  khyh: "",
  bankCard: "",
  idCard: "",
});

// 获取银行卡信息
async function getBankInfo() {
  try {
    const result = await getUserBankInfo();
    const response = result as unknown as ApiResponse;

    if (
      response &&
      (response.code === 0 || response.code === 200) &&
      response.data
    ) {
      // 存储银行卡信息
      Object.assign(bankInfo, response.data);

      // 预填充表单
      bankForm.userName = response.data.userName || "";
      bankForm.khyh = response.data.khyh || "";
      bankForm.bankCard = response.data.bankCard || "";
      bankForm.idCard = response.data.idCard || "";
    }
  } catch (error) {
    console.error("err:", error);
  }
}

// 保存银行卡
async function saveBankCard() {
  // 表单验证
  if (!bankForm.userName.trim()) {
    showToast(t("userbank_namePlaceholder"));
    return;
  }

  if (!bankForm.khyh.trim()) {
    showToast(t("userbank_bankNamePlaceholder"));
    return;
  }

  if (!bankForm.bankCard.trim()) {
    showToast(t("userbank_save"));
    return;
  }

  if (!bankForm.idCard.trim()) {
    showToast(t("qsrsfz"));
    return;
  }

  // 防止重复提交
  if (isSubmitting.value) return;
  isSubmitting.value = true;

  try {
    showToast({
      type: "loading",
      message: t("userbank_saving"),
      forbidClick: true,
      duration: 0,
    });

    // 调用API保存银行卡
    const result = await editUserBankCard({
      userName: bankForm.userName,
      khyh: bankForm.khyh,
      bankCard: bankForm.bankCard,
      idCard: bankForm.idCard,
    });

    const response = result as unknown as ApiResponse;

    closeToast();

    if (response && (response.code === 0 || response.code === 200)) {
      showToast({
        type: "success",
        message: response.msg || t("userbank_saveSuccess"),
      });

      // 刷新银行卡信息
      await getBankInfo();
    } else {
      showToast({
        type: "fail",
        message: response?.msg || t("userbank_saveFail"),
      });
    }
  } catch (error: any) {
    closeToast();
    console.error("err:", error);
    showToast({
      type: "fail",
      message: error?.message || t("userbank_saveFail"),
    });
  } finally {
    isSubmitting.value = false;
  }
}

const bankOptions = ref([]);
const showBankSheet = ref(false);

function onSelectBank(action) {
  bankForm.khyh = action.name;
  showBankSheet.value = false;
}

// 生命周期钩子
onMounted(async () => {
  // 获取银行卡信息
  getBankInfo();
  const res = await bankList();
  if (res.data) {
    bankOptions.value = res.data;
  }
});
</script>

<style lang="less" scoped>
.bank-page {
  min-height: 100vh;
  padding: 20px;
  background: url("@/assets/images/user/Topbg.png") no-repeat center center;
  background-size: cover;
  position: relative;
}

.bank-form {
  background: linear-gradient(
    0deg,
    rgba(254, 242, 230, 0) 10%,
    rgba(254, 237, 221, 0.1) 63%
  );
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-label {
  font-size: 16px;
  font-weight: 500;
  color: #f6e0ca;
  margin-bottom: 8px;
}

.form-input {
  width: 100%;
  height: 45px;
  background-color: rgba(25, 22, 21, 0.6);
  border: none;
  border-radius: 6px;
  color: #f6e0ca;
  font-size: 14px;
  padding: 0 15px;
  outline: none;

  &::placeholder {
    color: rgba(246, 224, 202, 0.5);
  }
}

.form-button {
  margin-top: 20px;
}

.submit-button {
  width: 100%;
  height: 45px;
  background-color: #f6e0ca;
  border: none;
  border-radius: 22px;
  color: #2d2522;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  transition: opacity 0.3s;

  &:hover {
    opacity: 0.9;
  }

  &:active {
    opacity: 0.8;
  }

  &:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }
}

.bank-list {
  margin-top: 20px;
}

.bank-item {
  background-color: rgba(30, 27, 26, 0.5);
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bank-info {
  .bank-name {
    font-size: 16px;
    color: #f6e0ca;
    margin-bottom: 5px;
  }

  .account-number {
    font-size: 14px;
    color: rgba(246, 224, 202, 0.8);
    margin-bottom: 3px;
  }

  .holder-name {
    font-size: 13px;
    color: rgba(246, 224, 202, 0.6);
  }
}

.no-data-wrapper {
  margin: 50px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.no-data-text {
  color: rgba(246, 224, 202, 0.6);
  font-size: 14px;
}
</style>
